<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
		<title>大唐微科集团</title>
		<link rel="shortcut icon" href="assets/img/icon.png">
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/main.css">
		<link rel="stylesheet" type="text/css" href="assets/css/green.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
		<link rel="stylesheet" href="assets/css/slicknav.css" />
		<style type="text/css">
			#app{
				margin:auto;
				width:90%;
				margin-left:5%;
				float: left;
			}
			.el-carousel__container img{
				display: block;
				width:100%;
			}
			#carousel-area i{
				margin-right: 0;
			}
			.bottom_color {
			    width: 100%;
			    margin-left:0 
			}
			@media only screen and (min-width: 320px) and (max-width: 480px) {
				.el-pagination.is-background .el-pager li {
				    margin: 0 2px;
				}
				.el-carousel__indicator {
				    padding: 4px 7px;
				}
				.el-carousel__button{
					width:7px;
					height:7px;
				}
			}
		</style>
	</head>

	<body>
		<header id="header-wrap"></header>
		<div id="app" v-cloak>
			<!--<div class="banner_img">
				<img src="assets/img/banner_bg.png"/>
			</div>-->
			<!--产融投资banner图-->
			<div class="inve_banner" v-show="showImg">
				<img src="assets/img/inve1.png"/>
			</div>
			<div class="inve_banner" v-show="hiddenImg" v-if="investmentBannerImg">
				<img :src="investmentBannerImg"/>
			</div>
			<!--center-->
			<section id="investment" class="section">
				<div class="invest_div">
					<p class="invest_tit">{{investmentTwoListL.newsTitle}}</p>
					<p class="invest_tit engline">SUPPLY  CHAIN  FINANCE</p>
					<p class="invest_centent" v-html="investmentTwoListL.newsContent"></p>
					<!--交易模式-->
					<div class="money_invest">
						<ul class="revitali_ul">
							<li class="revitali_li" v-for="(item,index) in transactionList" @click="btn_transaction(index,item.id)" :class="{first_revitail_li:index == current}">{{item.classifiedsName}}</li>
							<li class="revitali_li"></li>
						</ul>
						<dl class="investment_dl" v-for="(item,index) in transactionListInfo" v-if="item.profile == 'third'">
							<div class="investment_div"></div>
							<dt class="investment_dt">
								<p class="investment_dt_op">{{item.newsTitle}}</p>
								<p class="investment_dt_p">{{item.stageName}}</p>
							</dt>
							<dd class="investment_dd">
								<p class="investment_dd_op" v-html='item.newsContent'></p>
							</dd>
						</dl>
						<div class="investm_img" v-for="(item,index) in transactionListInfo" v-if="item.profile == 'first'">
							<div class="invest_p_img" v-html="item.newsContent"></div>
						</div>
					</div>
					<!--盛联金融-->
					<div class="Finance">
						<div class="Finance_left">
							<p class="invest_tit">{{investmentOneListL.newsTitle}}</p>
							<p class="invest_tit engline">SUPPLY  CHAIN  FINANCE</p>
							<p class="invest_centent" v-html="investmentOneListL.newsContent"></p>
						</div>
						<div class="Finance_right" v-if="investmentOneListL.newsCover">
							<img :src="investmentOneListL.newsCover"/>
						</div>
					</div>
					<div class="invalid_img" v-if="investmentOneImg">
						<img :src="investmentOneImg"/>
					</div>
					<!--底部边框颜色-->
					<div class="bottom_color">
						<div class="left_color"></div>
						<div class="right_color"></div>
					</div>
				</div>
			</section>
		</div>
		<script type="text/javascript" src="assets/js/jquery-min.js"></script>
		<script type="text/javascript" src="assets/js/conent.js"></script>
		<script type="text/javascript" src="assets/js/vue.js" ></script>
		<script type="text/javascript" src="assets/js/vue-resource.js" ></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data(){
					return{
						//产融投资banner图
						investmentBannerImg:'',
						showImg : '',
						hiddenImg : '',
						//盛联金融
						investmentOneListL:'',
						//盛联金融底部图
						investmentOneImg:'',
						//供应链金融
						investmentTwoListL:'',
						//交易模式
						transactionList:'',
						current : 0,
						transactionListInfo : ''
					}
				},
				created(){
					this.investmentInfo();
					this.transactionInfo();
				},
				methods:{
					//盛联、供应链金融
					investmentInfo(){
						var _this = this;
						this.$http.get(URL + 'activityManage').then(function(obj){
							if(obj.body.code == 'success'){
								_this.investmentOneListL = obj.body.data.rows[0];
								_this.investmentTwoListL = obj.body.data.rows[1];
								//盛联金融底部图
								_this.investmentOneImg = obj.body.FinaceImage;
								if(obj.body.BannerImage == null){
									_this.showImg = true;
								}else{
									//产融投资banner图
									_this.hiddenImg = true;
									_this.investmentBannerImg = obj.body.BannerImage
								}
								
							}
						})
					},
					//交易模式
					transactionInfo(){
						var _this = this;
						this.$http.get(URL + 'linksclassifies').then(function(data){
							if(data.body.code == 'success'){
								if(data.body.data.length > 0){
									_this.transactionList = data.body.data;
									this.btn_transaction(0,data.body.data[0].id)
								}
							}
						})
					},
					//切换点击事件
					btn_transaction(index,id){
						this.current = index;
						var _this = this;
						this.$http.get(URL + 'links/' + id).then(function(objList){
							if(objList.body.code == 'success'){
								if(objList.body.data.length > 0){
									_this.transactionListInfo = objList.body.data
								}
							}
						})
					}
				}
			})
		</script>
		<!--底部-->
		<footer id="footer"></footer>
		<a href="#" class="back-to-top">
			<i class="fa fa-angle-up">
				<span class="i_span"></span>
			</i>
		</a>
		<script type="text/javascript" src="assets/js/Top.js"></script>
	</body>

</html>